<script setup lang="ts">
import Navbar from "@/components/Navbar.vue";
import WindowTitle from "@/components/WindowTitle.vue";
import { useSetupStore } from "@/stores/setup";
useSetupStore().init();
</script>

<template>
  <WindowTitle></WindowTitle>
  <div class="flex h-full overflow-y-scroll scroll-bar">
    <Navbar></Navbar>
    <div class="w-screen">
      <router-view></router-view>
    </div>
  </div>
</template>

<style lang="scss">
.scroll-bar {
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar {
    width: 4px;
  }

  // &::-webkit-scrollbar-track {
  //   padding-right: 10px;
  // }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    // background-color: red;
    border-radius: 4px;
    // width: 10px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #c8c8c9;
    /* 悬停效果 */
  }

  // &:hover {
  //   &::-webkit-scrollbar-thumb {
  //     background-color: #c8c8c9;
  //   }
  // }
}
</style>
